<template>
  <div>
   <el-card >
     <!-- 通过自定义事件获取子组件传递过来的id -->
       <CategoryAttr @getCategoryId='getCategoryId' :show='!isShowTable' />
  </el-card>
  <el-card style="margin-top:30px" >
  <!-- 属性table -->
  <div v-show='isShowTable'>
    <!-- 在没有三级id时,不能点击添加属性按钮 -->
  <el-button type="success" @click="showAddAttrValue" :disabled='!category3Id'>添加属性</el-button>
  <el-table :data='attrList' border style="width: 100%">
     <el-table-column width="80px" align="center" label="序号" type='index' ></el-table-column>
      <el-table-column prop="attrName" label="属性名称"  align="center"  > </el-table-column>
      <el-table-column  label="属性列表" align="center"  > 
        <template slot-scope="{row,index}">
         <el-tag v-for="(attrValue,index) in row.attrValueList" :key='attrValue.id' style="margin-left:5px" >{{attrValue.valueName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center" > 
        <template slot-scope="{row,$index}">
        <el-button type="primary" size='mini' @click="updateAttr(row)">编辑</el-button>
        <el-button type="danger" size='mini' @click="deleteAttr(row)" >删除</el-button>
        </template>
      </el-table-column>
  </el-table>
  </div>
  <!-- 添加属性table -->
  <div v-show="!isShowTable">
    <el-form ref="form" :inline="true" :model='attrInfo' label-width="80px">
      <el-form-item label="属性名">
        <el-input size="medium" v-model='attrInfo.attrName' placeholder="请输入要添加的属性名" ></el-input>
      </el-form-item>
    </el-form>
      <el-button type="primary"  icon="el-icon-circle-plus-outline" @click="addAttr" :disabled='!attrInfo.attrName'>添加属性值</el-button>
      <el-button type="danger" @click="cancelAdd">取消</el-button>
      <!-- 添加|修改 属性值 -->
      <el-table border :data='attrInfo.attrValueList'  >
        <el-table-column type='index' align='center' label="序号" width="80px"> </el-table-column>
        <el-table-column prop="attrName" align='center' label="属性名称" > 
          <!-- 输入框 -->
         <template slot-scope="{row,$index}">
          <el-input v-model="row.valueName" :ref='$index' @blur="toLook(row)" @keyup.native.enter="toLook(row)" v-if='row.flag'></el-input>
          <div v-else='!row.flag'  >
            <span @click='toEdit(row,$index)'>{{row.valueName}}</span>
          </div>
         </template>
        </el-table-column>
        <el-table-column prop="prop" align='center' label="操作" >
          <template>
           <el-button type="primary" @click="remove" size='mini'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="saveAttr" :disabled='!attrInfo.attrValueList.length>0' >保存</el-button>
      <el-button  @click="cancelAdd">取消</el-button>
    
  </div>
  </el-card>
  </div>
</template>

<script>
// 引入深拷贝插件
import cloneDeep from "lodash/cloneDeep";
export default {
  name:'Attr',
  data(){
    return {
      category1Id:'',
      category2Id:'',
      category3Id:'',
      // 属性列表
      attrList:[],
      // 控制添加属性table和属性table的显示与隐藏
      isShowTable:true,
      // 初始化传递给服务器的数据
      attrInfo:{
        attrName: "",//收集添加或修改 属性的名字  (v-model收集)
        attrValueList: [], //收集响应的属性的属性值名字及id的数组
        categoryId: '',//三级id (当点击添加属性按钮时,三级id一定是有的,在此时收集)
        categoryLevel: 3,//分类标识 三级分类
       
      },
      
    }
  },
  methods:{
    // 自定义事件 获取id
    // 结构
    getCategoryId({categoryId,flag}){
      if(flag==1){
        this.category1Id=categoryId
        this.category2Id=''
        this.category3Id=''
      }else if(flag==2){
        this.category2Id=categoryId
        this.category3Id=''
      }else{
         this.category3Id=categoryId
        //  将三级分类的id全部获取到后,发送请求获取属性列表
        this.getCategoryAttr();
      }
    },
    // 请求获取属性
    async getCategoryAttr(){
      let { category1Id,category2Id,category3Id } =this
      let result =await this.$API.attr.reqCategoryAttrList(category1Id,category2Id,category3Id)
      if(result.code==200){
        this.attrList=result.data
      }
    },
    // 添加属性按钮控制table的切换
    showAddAttrValue(){
      this.isShowTable=false
    // 当点击添加属性按钮,添加完毕之后,不想添加了,点击取消,再次点击添加按钮,上次添加的数据还在
    // 所以要在再次点击添加按钮时将数据清空
    this.attrInfo={
        attrName: "",//收集添加或修改 属性的名字  (v-model收集)
        attrValueList: [], //收集响应的属性的属性值名字及id的数组
        categoryId: this.category3Id,//三级id (当点击添加属性按钮时,三级id一定是有的,在此时收集)
        categoryLevel: 3,//分类标识 三级分类
    }
    },
    //点击添加属性值的操作
    addAttr(){
      // 表格占位思想,先造一条假数据方便收集数据
      // this.attrInfo.attrValueList=[
      //   {
      //     attrName:'111',
      //     attrId:0
      //   }
      // ]
      // 点击添加table中的添加属性值按钮,只要点击,就往attrValueList数组中添加一个对象(一个属性值)
       this.attrInfo.attrValueList.push({
          attrId: this.attrInfo.id,
          valueName: "",
           // 控制input的显示与隐藏的标志
          flag:true
      })
      // 点击添加属性按钮自动聚焦
       this.$nextTick(() => {
        //确保DOM上树-渲染完毕了，而且DOM存在了
        this.$refs[this.attrInfo.attrValueList.length-1].focus();
      });
    },
    // 取消添加属性
    cancelAdd(){
      this.isShowTable=true
    },
    // 修改属性
    updateAttr(row){
      this.isShowTable=false
      // 首先修改的属性是对象,对象里面有数组,数组里面还有对象,数据结构复杂
      // 利用浅拷贝只能拷贝外层,数组里面的元素不能拷贝,所以考虑用到深拷贝
      // 此处使用lodash中的插件实现深拷贝 按需引入 cloneDeep
      this.attrInfo=cloneDeep(row)
      // 点击添加属性是,是有flag标志的,所以点击span可以修改的 ,但是点击编辑按钮,是没有flag是没有flag的,所以不能修改
      // 如果直接遍历属性值数组添加flag,会有bug,开发者工具变了,但是页面没有变,因为遍历添加的发了个不是响应式的
      // 此时就要用到$set方法
      this.attrInfo.attrValueList.forEach((item)=>{
        this.$set(item,'flag',false)
      })

    },
    // input输入框失去焦点触发回调
    toLook(row){
      //失去焦点隐藏input,显示span
      // 在将span显示之前,即改变flag状态之前,进行判断,因为属性是用户输入,用户输入的情况有很多
      //1. 用户输入空格
      //2.用户添加重复的值
      if(row.valueName.trim== ''){
        this.$message('请输入连续字符')
        return
      }
      // 遍历属性值数组每一项 去除最后一项
      let isReplact= this.attrInfo.attrValueList.some((item)=>{
        return row != item ? item.valueName==row.valueName : false
        })
      
      if(isReplact){
         this.$message("属性值名称重复,请选择一个新的属性值");
        return
      }
      

      row.flag=false
    },
    // 点击span标签,处于编辑状态
    toEdit(row,index){
      // 点击显示input
      row.flag=true
      // 自动聚焦
      // this.$nextTick(()=>{
      //  this.$refs[index].focus()
      // })
      this.$nextTick(() => {
        //确保DOM上树-渲染完毕了，而且DOM存在了
        console.log(this.$refs[index]);
        this.$refs[index].focus();
      });
      
    },
    // 删除属性值
    remove(){
      this.attrInfo.attrValueList=[]
    },
    // 点击保存按钮数据删除
    async saveAttr(){
       //整理数据----因为有一些数据服务器不需要
       //情况1:
       //1:valueName没有数值，不应该带给服务器
       //2:valuename有属性值，但是有一个KV flag   -----总结：s带给服务器数据valueName应该有数值且没有flag
      this.attrInfo.attrValueList=this.attrInfo.attrValueList.filter((item)=>{
        if(item.valueName != ''){
          delete item.flag
          return true
        }
      })
      let result=await this.$API.attr.addAttr(this.attrInfo)
      if(result.code==200){
        // 跳转table页面
        this.isShowTable=true
        // 重新获取数据
        this.getCategoryAttr()
      }

    },
    // 删除某一个属性
    async deleteAttr({id}){
      let result = await this.$API.attr.deleteATTR(id)
      if(result.code==200){
         this.getCategoryAttr()
      }
    }

   
  }
}
</script>

<style>

</style>